<template>
	<div class="gardenpagecontainer">
		<!--搜索框-->
		<el-row>
			<el-col :span="12">
				<el-input placeholder="校区名称" v-model="searchText" class="input-with-select">
			    <el-select style="width:1.5rem;"  v-model="selectIns" slot="prepend" placeholder="全部机构">
			    	<template v-for="item in institutionList">
			    		<el-option :label="item.name" :key="item.value" :value="item.value"></el-option>
			    	</template>			      
			    </el-select>
    			<el-button @click="seachCampus" slot="append" class="btn_user_defined">
    				查询<i class="el-icon-search el-icon--right"></i>
    			</el-button>
            </el-input>
			</el-col>
			<el-col :span="12">
				<div class="toRight">
		  		<el-button @click="addCampus" type="primary btn_add_defined" icon="el-icon-plus" plain></el-button>
		  	   </div>
			</el-col>
		</el-row>
		<!--列表-->
		<el-row style="margin-top:.2rem;">
			<template>
			  <el-table
			    :data="gardenList"
			    @cell-click="modifyCampus"
			    style="width: 100%"				   
			    border>
			    <el-table-column			     
			      align="center"			      
			      label="序号"
			      width="100">
			      <template slot-scope="scope">
			      	{{scope.$index+1}}
			      </template>
			    </el-table-column>
			    <el-table-column
			      prop="subsidiaryOrgan"
			      align="center"			      
			      label="所属机构"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="campusName"
			      align="center"			      
			      label="校区名称"
			      width="150">
			    </el-table-column>
			    <el-table-column
			      prop="campusAbbreviation"
			      align="center"			      
			      label="校区简称"
			      width="150">
			    </el-table-column>
			    <el-table-column
			      prop="serialNumber"
			      align="center"			      
			      label="编号"
			      width="150">
			    </el-table-column>
			    <el-table-column
			      prop="campusAddr"
			      align="center"			      
			      label="校区地址"
			      width="200">
			    </el-table-column>
			    <el-table-column
			      prop="linkman"
			      align="center"			      
			      label="联系人"
			      width="100">
			    </el-table-column>
			    <el-table-column
			      prop="phoneNumber"
			      align="center"			      
			      label="手机"
			      width="150">
			    </el-table-column>
			    <el-table-column
			      prop="state"
			      align="center"			      
			      label="状态"
			      width="100">
			      <template slot-scope="scope">
			      	<button  v-if="gardenList[scope.$index].state===0" class="btn_self_defined btn_self_defined_del">废除</button>
			      	<button  v-else-if="gardenList[scope.$index].state===1" class="btn_self_defined btn_self_defined_default">正常</button>            		
                  </template>
			    </el-table-column>
			    <el-table-column
			      prop="creationTime"
			      align="center"			      
			      label="创建时间"
			      width="150">
			    </el-table-column>
			    <el-table-column
			      prop="operate"		    
			      align="center"
			      column-key="btn"
			      label="操作">
			      <template slot-scope="scope"> 			      	
			        <span  class="btn_editor" >
			        	<i class="el-icon-edit"></i>
			        </span>			      					      		        
                  </template>
			    </el-table-column>			 
			  </el-table>
            </template>
		</el-row>
	    <!--分页-->
	    <el-row style="margin-top:.2rem">
	    	<el-pagination
			  background
			  layout="prev, pager, next"			 
			  :total="total"
			  @current-change="changePage"
			  >
			</el-pagination>
	    </el-row>	
	    <!--弹出对话框-->
	    <el-dialog
	    	title="修改校区"	    	
	    	:visible.sync="boxshow"
			width="30%"	
			 custom-class="el-dialog-bg" 
			:before-close="handleClose"
	    	>	    	
	    	<div class="content-box">
	    	    <div class="licls">
	    	    	<div class="box">
	    	    		<div class="row">所属机构<span>*</span></div>
	    	    		<div class="row"><i class="el-icon-menu"></i><span>威创测试机构</span></div>
	    	    	</div>
	    	    	<div class="box">
	    	    		<div class="row">所属类别<span>*</span></div>
	    	    		<div class="row"><i class="el-icon-menu"></i><span>威创测试机构</span></div>
	    	    	</div>
	    	    	<div class="box">
	    	    		<div class="row">所属区域</div>
	    	    		<div class="row"><i class="el-icon-menu"></i><span>威创测试机构</span></div>
	    	    	</div>
	    	    </div>
	    	    <div class="licls">
	    	         <div class="input-campus-box">
	    	         	<input type="text" placeholder="校区名称" class="input-campus-content"/>
	    	         </div>
	    	         <div class="input-campus-short-box">
	    	         	<input type="text" placeholder="校区简称" class="input-campus-content"/>
	    	         </div>
	    	    </div>
	    	    <div class="licls">
	    	         <div class="input-box">
	    	           <input type="text" placeholder="校区编号" class="inputbox"/>
	    	         </div>
	    	         <div class="input-box">
	    	         	<input type="text" placeholder="联系人" class="inputbox"/>
	    	         </div>
	    	         <div class="input-box">
	    	         	<input type="text" placeholder="手机号码" class="inputbox"/>
	    	         </div>
	    	    </div>
	    	    <div class="licls">
	    	    	<div class="input-box">
	    	           <input type="text" placeholder="请输入校区地址" class="inputbox"/>
	    	        </div>
	    	    </div>
	    	    <div class="licls">
	    	    	<div class="input-box">
	    	           <input type="text" placeholder="请输入校区标语" class="inputbox"/>
	    	        </div>
	    	    </div>
	    	    <div class="licls">
	    	    	<div class="input-box">
	    	           <input type="text" placeholder="校区编号" class="inputbox"/>
	    	         </div>
	    	         <div class="input-box">
	    	         	<input type="text" placeholder="联系人" class="inputbox"/>
	    	         </div>
	    	         <div class="input-box">
	    	         	<input type="text" placeholder="手机号码" class="inputbox"/>
	    	         </div>
	    	    </div>
	    	    <div class="licls">
	    	    	<div class="img-box">
	    	    		<div class="logo-text">网站LOGO</div>
	    	    		<div class="logo-img"   @click="showdialog">	    	
	    	    			<img :src="isImage"  />
	    	    		</div>
	    	    		<div class="logo-decribe">(点击图片可修改,建议图片大小260*45)</div>
	    	    	</div>
	    	    </div>
	    	</div>
	        <span slot="footer" class="dialog-footer">
			    <el-button @click="boxshow = false">取 消</el-button>
			    <el-button type="primary" @click="boxshow = false">保存</el-button>
  			</span>
	   </el-dialog>
	   <!--裁剪图片组件-->
	   <imgplugins></imgplugins>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	import imgplugins from '../common/cutImage_plugin'
	export default {
	  data() {
	    return {
	      searchText: '',
	      selectIns:'',
	      institutionList:[
	        {name:'机构1',value:'1'},
	        {name:'机构2',value:'2'},
	        {name:'机构3',value:'3'}
	       ],
	       currentRow:0,
	       gardenList:[],	      
	       total:100,
	       boxshow:false,
	    }
	  },
	  components: {
		  	imgplugins
		  },
	  methods:{
	  	//列表初始化
	  	initData:function(){
	  		this.gardenList=[
	        {
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:0,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        },{
	         subsidiaryOrgan:'威创测试机构',
	         campusName:'北京红缨',
	         campusAbbreviation:'红缨',
	         serialNumber:'WC001',
	         campusAddr:'北京',
	         linkman:'张三',
	         phoneNumber:'18898982322',
	         state:1,
	         creationTime:'2019-02-21'
	         
	        }
	       ]
	  	},
	  	//关闭对话框
	  	handleClose:function(done){
	  		done();
	  	},
	  	showdialog:function(){	  	
	  	
	  		this.$store.dispatch('cutImageplugin/showcutImagePanel')   
	  	},
	  	//查询校区
	  	seachCampus:function(){
	  		console.log(this.isImage)
	  	},
	  	//新增校区
	  	addCampus:function(){
	  		
	  //		router.push("/resource_set/testimg")
	  	},
	  	//修改校区
	  	modifyCampus:function(row, column, cell, event){
	  			  	 
	  	let key = column.columnKey 
	    let rowdata = row;	     
	    if(key){	
	    	this.$store.dispatch('cutImageplugin/setcutImageData',null)
	    	this.boxshow = true;	
	    }
	  	},
	  	//列表页切换
	  	changePage:function(){
	  		
	  	}	  		  
	  },
	  mounted:function(){
	  	this.initData();
	  },
	  computed:{
    	 ...mapState({                            
					  isImage:state=>state.cutImageplugin.cutImage 						                                             
					})
       }
}
</script>

<style lang="scss">
	.gardenpagecontainer{
		margin:0rem .2rem 0rem .2rem;
		padding:.2rem;
		box-shadow: 0.01rem 0.01rem 0.01rem 0.01rem #EFEFEF;
		background: #FFFFFF;
		.btn_user_defined{
		background-color: #3598DC !important;
		width:0.8rem !important;
		border-bottom-left-radius: 0px;
		border-top-left-radius: 0px;
		color: #FFFFFF !important;
		}
		.btn_add_defined{
			background-color: #3598DC !important;
			color: #FFFFFF;
		}
		.toRight{
			margin-right: 0px !important;
			float: right;		
		}
		.btn_self_defined{
			border: none;
			color: #FFFFFF;
		}
		.btn_self_defined_del{
			background: #FF5722;		
		}
		.btn_self_defined_default{
			background: #26A69A;
		}
		.content-box{
			width:100%;
			height: 6rem;
			margin-top:-0.2rem;			
			.licls{
				width:100%;
				height: 0.7rem;
				background:#FFFFFF;
				margin-top:.1rem;
				.box{
					width:33.3%;
					height: .5rem;
					float: left;
					border-right: 2px solid #F2F2F2;
					margin-top:0.1rem;		
					.row{
						width: 100%;
						height: .25rem;
						text-align: center;
						color: #888888;
						line-height: .25rem;
						font-size:.15rem;
						span:nth-child(1){
							color: #FF0000;
						}
					}			
				}
				.box:nth-child(3){
					border: none;
				}				
			}
			.licls:nth-child(1){
				margin-top:0px;
			}
			.licls:nth-child(2){
				.input-campus-box{
					width:65%;
					height: 100%;
					float: left;
					padding:.1rem;
					.input-campus-content{
						width:100%;
		        		height: 100%;
		        		font-size: .15rem;
		        		padding: 0px !important;
		        		border-top:none;
		        		border-bottom: 1px solid #dedede;
		        		border-right: none;
		        		border-left: none;
		        		outline:none;
		        		font-size: .15rem;
		        		padding:0px !important ;
					}
				}
				.input-campus-short-box{
					width:35%;
					height: 100%;
					float: left;
					padding:.1rem;					
					.input-campus-content{
						width:100%;
		        		height: 100%;
		        		font-size: .15rem;
		        		padding: 0px !important;
		        		border-top:none;
		        		border-bottom: 1px solid #dedede;
		        		border-right: none;
		        		border-left: none;
		        		outline:none;
		        		font-size: .15rem;
		        		padding:0px !important ;
					}
					
				}
			}
		    .licls:nth-child(3){
		    	.input-box{
		    		    width:33.3%;
						height: 100%;
						float: left;
						padding:.1rem;					
						.inputbox{
							width:100%;
			        		height: 100%;
			        		font-size: .15rem;
			        		padding: 0px !important;
			        		border-top:none;
			        		border-bottom: 1px solid #dedede;
			        		border-right: none;
			        		border-left: none;
			        		outline:none;
			        		font-size: .15rem;
			        		padding:0px !important ;
			        		span{
			        			height: 50%;
			        		}
						}	
		    	}
		    }
		    .licls:nth-child(4){
		    	.input-box{
		    		    width:100%;
						height: 100%;						
						padding:.1rem;					
						.inputbox{
							width:100%;
			        		height: 100%;
			        		font-size: .15rem;
			        		padding: 0px !important;
			        		border-top:none;
			        		border-bottom: 1px solid #dedede;
			        		border-right: none;
			        		border-left: none;
			        		outline:none;
			        		font-size: .15rem;
			        		padding:0px !important ;
						}	
		    	}
		    }.licls:nth-child(5){
		    	.input-box{
		    		    width:100%;
						height: 100%;						
						padding:.1rem;					
						.inputbox{
							width:100%;
			        		height: 100%;
			        		font-size: .15rem;
			        		padding: 0px !important;
			        		border-top:none;
			        		border-bottom: 1px solid #dedede;
			        		border-right: none;
			        		border-left: none;
			        		outline:none;
			        		font-size: .15rem;
			        		padding:0px !important ;
						}	
		    	}
		    }.licls:nth-child(6){
		    	.input-box{
		    		    width:33.3%;
						height: 100%;
						float: left;
						padding:.1rem;					
						.inputbox{
							width:100%;
			        		height: 100%;
			        		font-size: .15rem;
			        		padding: 0px !important;
			        		border-top:none;
			        		border-bottom: 1px solid #dedede;
			        		border-right: none;
			        		border-left: none;
			        		outline:none;
			        		font-size: .15rem;
			        		padding:0px !important ;
						}	
		    	}
		    }.licls:nth-child(7){		    	
				height: 1.2rem;				
				.img-box{
					width:50%;
					height: 1rem;
					float: left;
					margin:.1rem;							
					.logo-text{
						width:100%;
						height: .1rem;
						font-size: 0.08rem;
						line-height: .1rem;
						text-align: right;
						
					}
					.logo-img{
						width:100%;
						margin-top:0.05rem;
						height: .6rem;					
						.el-upload--picture-card {
							width: 100%;						   
						    height: .6rem;
						    background: red;
						}
						img{
							height: 100%;
						}
						
					}					
					.logo-decribe{
						margin-top:0.05rem;
					}
				}
				
		    }
		}
		.el-dialog-bg{
			background: #F4F5F6;
			margin-top:10vh !important;
		}
		
	}
	

		
	
	
</style>